@keyframes ofBannerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--of-scroll)); }
}

body {
  margin: 0;
  font-family: Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url('../image/bag/main3.jpg');
  background-size: cover;
  background-position: center;
}

/* ── OUTER PHONE FRAME ── */
.phoneFrame {
  position: relative;
  width: 420px;
  height: 820px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 35%),
    linear-gradient(160deg, #55585e 0%, #2b2d31 45%, #101113 100%);
  border-radius: 52px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    inset 0 2px 5px rgba(255,255,255,0.2),
    inset 0 -3px 8px rgba(0,0,0,0.65),
    0 0 0 1px #000,
    0 40px 100px rgba(0,0,0,0.8),
    0 10px 30px rgba(0,0,0,0.5);
  padding: 7px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* VOLUME UP */
.phoneFrame::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 140px;
  width: 4px;
  height: 34px;
  background: linear-gradient(to right, #1a1a1a, #2a2a2a);
  border-radius: 3px 0 0 3px;
  box-shadow: 0 42px 0 #1a1a1a;
}

/* POWER BUTTON */
.phoneFrame::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 170px;
  width: 4px;
  height: 55px;
  background: linear-gradient(to left, #1a1a1a, #2a2a2a);
  border-radius: 0 3px 3px 0;
}

/* ── PHONE SCREEN ── */
.phone-case {
  width: 100%;
  height: 100%;
  border-radius: 45px;
  overflow: hidden;
  background: url('../image/bag/gfbag.jpg') center/cover no-repeat;
  position: relative;
  box-sizing: border-box;
}

.phone {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
}

/* ── MOBILE — full screen ──
   Purely width-based: shrinking the browser window down to phone
   size, whether on a real phone or by resizing a desktop window,
   collapses the phone case into a true edge-to-edge fullscreen
   layout — same as it always has. js/device-overlay.js watches this
   same width breakpoint separately to decide whether the dialogue
   overlay renders inside the (now fullscreen) phone, or outside it
   as the desktop bottom bar. */
@media screen and (max-width: 500px) {
  body {
    background: none !important;
    background-color: #000 !important;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .phoneFrame {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }

  .phoneFrame::before,
  .phoneFrame::after {
    display: none !important;
  }

  .phone-case {
    border-radius: 0 !important;
  }
}
/* ── MOBILE ── */
@media screen and (max-width: 500px) {

  body {
    background: none !important;
    background-color: #000 !important;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .phone-case {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }

}



/* SAVE BUTTON */

#home {
  padding-top:0;
  padding-bottom:80px;
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  box-sizing:border-box;
  background:#111218;
}

/* ═══ iOS-STYLE HOME WIDGET (single card) ═══ */
#homeDayBadge {
  position: absolute;
  top: 58px;
  left: 12px;
  z-index: 100;
  pointer-events: none;
  width: 160px;
}

/* single card */
.hwCard {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

/* LEFT section — time + date */
.hwLeft {
  flex: 1.5;
  padding: 7px 8px 7px 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* vertical divider */
.hwDivider {
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

/* RIGHT section — day number */
.hwRight {
  flex: 1;
  padding: 7px 8px 7px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Phase icon */
.hwIcon {
  font-size: 12px;
  line-height: 1;
  margin-bottom: 2px;
}

/* Time display — "8:00 AM" */
.hwTime {
  font-size: 15px;
  font-weight: 700;
  color: #FFB800;
  line-height: 1;
  letter-spacing: -0.3px;
  font-family: -apple-system, 'SF Pro Display', Arial, sans-serif;
}

/* Date line — "Jul 1 · Monday" */
.hwDateLine {
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
  letter-spacing: 0.2px;
  font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
}

/* Month label in right section */
.hwMonth {
  font-size: 7px;
  font-weight: 700;
  color: rgba(255,255,255,0.38);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
  margin-bottom: 1px;
}

/* Big day number in right section */
.hwBigNum {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #00AFEC;
  font-family: -apple-system, 'SF Pro Display', Arial, sans-serif;
  letter-spacing: -0.5px;
}

/* Day abbreviation in right section */
.hwDayName {
  font-size: 7px;
  font-weight: 600;
  color: rgba(255,255,255,0.38);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2px;
  font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
}

/* ═══ HOME SCREEN — APP ICONS (modern launcher style) ═══ */
.app-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 62px;
  -webkit-tap-highlight-color: transparent;
}

.app-icon {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* glossy top highlight — the soft sheen real app icons (iOS especially)
   have across their upper half, giving them a glassy/premium look
   instead of a flat matte square. Purely decorative, sits above the
   icon image but ignores clicks/taps. */
.app-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.app-icon:active {
  transform: scale(0.88);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

#app {
  display:none;
  height:100%;
  position:relative;
  z-index:50;
}

#home {
  display:none;
  padding-top:0;
  height:100%;
  overflow-y:auto;
  background:#111218;
}

.contact {
  display:flex;
  align-items:center;
  padding:10px 16px;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.045);
  transition:background 0.12s;
  -webkit-tap-highlight-color:transparent;
}
.contact:active { background:rgba(255,255,255,0.05); }

.contact-box {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
}

.contact-box img {
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

/* CHAT */
.chat {
  display:none;
  flex-direction:column;
  height:100%;
  position:relative;
}

/* Transparent on purpose — like ThikG's DM chat header, the wallpaper
   should show fully behind the contact's name/avatar here too, not be
   dimmed by a solid backing. position:relative keeps it correctly
   layered above .messages/.input-bar in source order either way. */
.top {
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
  position:relative;
}

.top img {
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

.backBtn {
  width:36px;
  height:36px;
  border:none;
  background:transparent;
  color:white;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}
.backBtn:active { opacity:0.55; }

.messages {
  flex:1;
  overflow-y:auto;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:transparent;
  scrollbar-width:none;
}
.messages::-webkit-scrollbar { display:none; }

.msgRow {
  display:flex;
  align-items:flex-end;
  gap:7px;
  padding:1px 2px;
}

.left  { justify-content:flex-start; }
.right { justify-content:flex-end;   }

.msg {
  padding:10px 14px;
  border-radius:18px;
  max-width:72%;
  font-size:14px;
  line-height:1.45;
  word-break:break-word;
  font-family:Arial;
}

.me {
  background:#e63950;
  color:white;
  border-bottom-right-radius:5px;
  box-shadow:0 2px 10px rgba(230,57,80,0.3);
}
.them {
  background:#1e1e2e;
  color:rgba(255,255,255,0.92);
  border-bottom-left-radius:5px;
  border:1px solid rgba(255,255,255,0.05);
}

.avatar {
  width:30px;
  height:30px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

/* Outer bar itself is transparent — same as ThikG's .tgInputBar — so the
   wallpaper shows through the padding around the pill. The input field
   below keeps its own subtle tint (already identical to ThikG's
   .tgInputPill values), and the round send button stays solid red. */
.input-bar {
  display:flex;
  align-items:center;
  padding:10px 12px;
  gap:8px;
  background:transparent;
  border-top:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
}

.input-bar input {
  flex:1;
  padding:11px 16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.08);
  background:#000;
  color:white;
  font-size:14px;
  font-family:Arial;
  outline:none;
}
.input-bar input::placeholder { color:rgba(255,255,255,0.3); }

.input-bar button {
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#e63950;
  color:white;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 3px 12px rgba(230,57,80,0.45);
  transition:transform 0.12s;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}
.input-bar button:active { transform:scale(0.9); }

/* ═══ MESSAGES APP — LIGHT MODE ═══
   Toggled via the switch in loadContacts()'s header (toggleMsgTheme()
   in core.js), which adds/removes "msg-light" on #app. Message bubble
   colors and structural chrome (.top/.messages/.input-bar/etc) are
   plain CSS classes, so overriding them here recolors both the contact
   list and an already-open chat (including its whole message history)
   instantly — no re-render needed. The header/contact-row text itself
   IS re-rendered on toggle (loadContacts() computes those colors
   directly from _msgTheme), so it isn't duplicated here. */
/* #home is opaque even in dark mode (it's the contact list, not meant
   to show the wallpaper) so that one stays solid. .chat/.messages/.top/
   .input-bar all stay fully transparent in light mode too — same as
   dark mode — so the wallpaper (default or a custom per-contact one)
   shows completely behind the whole conversation, contact name and
   input bar included, exactly like ThikG's DM chat. Only the input
   field itself (.input-bar input) keeps its own subtle tint. */
#app.msg-light #home {
  background:#eef0fb !important;
}

#app.msg-light .top { border-bottom:1px solid #e2e4f5 !important; }
#app.msg-light .input-bar { border-top:1px solid #e2e4f5 !important; }

#app.msg-light .them {
  background:#ffffff !important;
  color:#1a1a2e !important;
  border:1px solid #e5e7f5 !important;
}
#app.msg-light .me {
  background:#6c6cf0 !important;
  box-shadow:0 2px 10px rgba(108,108,240,0.3) !important;
}

#app.msg-light .input-bar input {
  background:#f5f6fa !important;
  color:#1a1a2e !important;
  border:1px solid #e2e4f5 !important;
}
#app.msg-light .input-bar input::placeholder { color:rgba(0,0,0,0.35) !important; }

#app.msg-light .contact { border-bottom:1px solid #e9eaf5 !important; }
#app.msg-light .contact:active { background:#e4e6f7 !important; }

#app.msg-light .backBtn svg,
#app.msg-light .top svg {
  stroke:#1a1a2e !important;
}

#app.msg-light #chatName { color:#1a1a2e !important; }
#app.msg-light #chatSubLabel { color:rgba(0,0,0,0.4) !important; }

#app.msg-light #chatSkipBtn {
  background:rgba(0,0,0,0.06) !important;
  border-color:rgba(0,0,0,0.14) !important;
}

/* ═══ THIK G — LIGHT MODE ═══
   Toggled via the switch inside the DM chat screen (toggleTGTheme() in
   app-thikG.js), which adds/removes "tg-light" on #thikgMenu. Unlike
   the Messages toggle, this one is meant to affect the WHOLE app —
   #tgHomeView/#tgReelsView/#tgProfilePage/#tgDMScreen/#tgDMChatScreen
   are all nested inside #thikgMenu, so a single class toggle here
   cascades through every screen, not just the DM chat it's opened
   from. CSS !important beats inline styles (including ones written by
   JS template strings, e.g. the feed/DM-list rows), so none of the
   render functions that build those needed to change — only the
   screens/rows that had no class hook at all got one added, purely so
   this stylesheet has something to select. */
#thikgMenu.tg-light {
  background:#f5f6fa !important;
}
#thikgMenu.tg-light #tgHomeView,
#thikgMenu.tg-light #tgReelsView,
#thikgMenu.tg-light #tgProfilePage,
#thikgMenu.tg-light #tgDMScreen,
#thikgMenu.tg-light #tgDMChatScreen {
  background:#f5f6fa !important;
}

#thikgMenu.tg-light .tgTopBar {
  background:rgba(255,255,255,0.95) !important;
  border-bottom-color:#e2e4f5 !important;
}
#thikgMenu.tg-light .tgTopBar span,
#thikgMenu.tg-light .tgTopBar svg {
  color:#1a1a2e !important;
  stroke:#1a1a2e !important;
}

#thikgMenu.tg-light #tgProfUsername,
#thikgMenu.tg-light #tgProfName,
#thikgMenu.tg-light #tgDMChatName {
  color:#1a1a2e !important;
}
#thikgMenu.tg-light #tgProfBio {
  color:rgba(0,0,0,0.55) !important;
}
#thikgMenu.tg-light #tgProfPostsCount,
#thikgMenu.tg-light #tgProfPostsCount ~ div {
  color:#1a1a2e !important;
}
#thikgMenu.tg-light .tgProfStatNum {
  color:#1a1a2e !important;
}
#thikgMenu.tg-light .tgProfStatLabel {
  color:rgba(0,0,0,0.5) !important;
}
#thikgMenu.tg-light .tgStoryLabel {
  color:rgba(0,0,0,0.6) !important;
}
#thikgMenu.tg-light .tgDMChatSubtitle {
  color:rgba(0,0,0,0.4) !important;
}
#thikgMenu.tg-light .tgImgThumb {
  background:#e2e4f5 !important;
}

#thikgMenu.tg-light .tgBottomBar {
  background:#ffffff !important;
  border-top-color:#e2e4f5 !important;
}
#thikgMenu.tg-light .tgBottomBar svg[fill="white"] {
  fill:#1a1a2e !important;
}
#thikgMenu.tg-light .tgBottomBar svg[stroke="white"] {
  stroke:#1a1a2e !important;
}
#thikgMenu.tg-light .tgBottomBar img {
  border-color:rgba(0,0,0,0.35) !important;
}

/* ═══ CALL APP — AUDIO CALL MODE ═══
   Toggled via .callSceneAudio on #callScene (see startCall() in
   app-call.js). The background image/video stays but gets blurred and
   dimmed into an ambient backdrop instead of a clear picture, and the
   big avatar + running timer (#callAudioCenter) takes over as the
   visual focus — same layered scene, same #callNarrText captions,
   just no clear image/video ever shown per the audio-call brief. */
#callScene.callSceneAudio #callBgImage,
#callScene.callSceneAudio #callBgVideo {
  filter:blur(30px) brightness(0.45);
  transform:scale(1.15);
}
#callScene.callSceneAudio #callAudioCenter {
  display:flex !important;
}

#thikgMenu.tg-light .tgTabBar {
  border-color:#e2e4f5 !important;
}
#thikgMenu.tg-light .tgTabBar button svg {
  stroke:#1a1a2e !important;
}
#thikgMenu.tg-light .tgTabBar button[style*="border-bottom:1.5px solid white"] {
  border-bottom-color:#1a1a2e !important;
}

#thikgMenu.tg-light .tgInputBar {
  border-top-color:#e2e4f5 !important;
}
#thikgMenu.tg-light .tgInputPill {
  background:#f5f6fa !important;
  border-color:#e2e4f5 !important;
}
#thikgMenu.tg-light #tgDMInputBox {
  color:#1a1a2e !important;
}
#thikgMenu.tg-light #tgDMInputBox::placeholder {
  color:rgba(0,0,0,0.35) !important;
}

/* DM contact-list rows and feed post cards are plain JS-templated HTML
   with no class hooks on their inner text, so these target them
   structurally by position instead. */
#thikgMenu.tg-light .tgDMRow {
  border-bottom-color:#e9eaf5 !important;
}
#thikgMenu.tg-light .tgDMRow > div:nth-child(2) > div:first-child {
  color:#1a1a2e !important;
}
#thikgMenu.tg-light .tgDMRow > div:nth-child(2) > div:last-child {
  color:rgba(0,0,0,0.45) !important;
}

#thikgMenu.tg-light .tgPostCard {
  background:#ffffff !important;
  border-bottom-color:#e9eaf5 !important;
}
#thikgMenu.tg-light .tgPostUsernames,
#thikgMenu.tg-light .tgPostCaption,
#thikgMenu.tg-light .tgPostCaptionText,
#thikgMenu.tg-light .tgPostLikeCount,
#thikgMenu.tg-light .tgPostMenu,
#thikgMenu.tg-light .tgFriendsLabel,
#thikgMenu.tg-light .tgProfActionBtn {
  color:#1a1a2e !important;
}
#thikgMenu.tg-light .tgPostWith {
  color:rgba(0,0,0,0.4) !important;
}
#thikgMenu.tg-light .tgProfActionBtn {
  background:#eceefa !important;
  border-color:#dcdfef !important;
}
#thikgMenu.tg-light .tgPostActions svg[stroke="white"] {
  stroke:#1a1a2e !important;
}
#thikgMenu.tg-light .tgPostActions svg[fill="white"] {
  fill:#1a1a2e !important;
}
#thikgMenu.tg-light .tgEmptyState {
  color:rgba(0,0,0,0.35) !important;
}
#thikgMenu.tg-light .tgDMBubbleThem {
  background:#ffffff !important;
  color:#1a1a2e !important;
  border-color:#e2e4f5 !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}

/* APP GRID — three fixed rows (top = frequent gameplay apps, middle =
   personal/utility apps, bottom = everyday communication/media apps). */
.app-grid {
  position:absolute;
  bottom:26px;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:0 16px;
  box-sizing:border-box;
}

/* Fixed-width columns (not flexbox auto-sizing) so icon columns line up
   the same way in every row — a row with fewer icons (e.g. the top row's
   3, or 2 while Hack is still locked/hidden) fills columns left-to-right
   starting from column 1, landing under the same columns the 4-icon rows
   use, instead of each row centering its own icons independently. */
.app-row {
  display:grid;
  grid-template-columns:repeat(4, 62px);
  justify-content:center;
  justify-items:center;
  gap:22px;
  width:100%;
}

/* PAGE INDICATOR — cosmetic-only dots between the scrollable app rows
   and the fixed bottom dock, like a real Android/iOS launcher. Sits on
   its own row inside .app-grid's column gap, so it already gets the
   same spacing above/below as the icon rows do. */
.page-dots {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:100%;
}

.page-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.35);
  transition:background 0.2s ease, transform 0.2s ease;
}

.page-dot.active {
  background:rgba(255,255,255,0.9);
  transform:scale(1.15);
}

/* DOCK — translucent rounded card behind the bottom row of everyday
   apps (Messages/Calls/Gallery/ThinkG), like a real Android/iOS
   launcher's dock bar. */
.app-dock {
  width:100%;
  box-sizing:border-box;
  margin-top:10px; /* extra breathing room above the dock, beyond the
                       normal .app-grid row gap, so it reads as a
                       separate section from the upper icon rows */
  padding:12px 14px;
  border-radius:26px;
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
}

/* SAVE */


.slot {
  border:1px solid white;
  margin:10px;
  padding:10px;
  color:white;
}

/* ===================== GALLERY — UPGRADED ===================== */

#galleryMenu {
  display:none;
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:#0d0d0d;
  z-index:99999;
  overflow:hidden;
  flex-direction:column;
}

.galTopBar {
  display:flex;
  align-items:center;
  padding:12px 14px;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(6px);
  gap:10px;
  flex-shrink:0;
}

.galTopBar .galBackBtn {
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.15);
  color:white;
  font-size:18px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.galTopBar h3 {
  margin:0;
  font-size:16px;
  font-weight:600;
  color:white;
  flex:1;
  text-align:center;
}

#galleryCount {
  font-size:12px;
  color:rgba(255,255,255,0.5);
}

#galleryScroll {
  flex:1;
  overflow-y:auto;
  padding:10px;
  scrollbar-width:none;
}
#galleryScroll::-webkit-scrollbar { display:none; }

#galleryBox {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}

.galThumb {
  aspect-ratio:1/1;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  background:#1a1a1a;
}

.galThumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.2s;
}

.galThumb:active img { transform:scale(0.95); }

#galleryEmpty,
.galEmptyState {
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:300px;
  color:rgba(255,255,255,0.3);
  font-size:14px;
  gap:10px;
  text-align:center;
  column-span:all; /* spans both masonry columns inside #galleryCharGrid */
}
#galleryEmpty span,
.galEmptyState span { font-size:40px; }

/* ═══ CHARACTER CARD GRID (Gallery home) ═══ */
/* Masonry / photo-collage layout — CSS multi-column instead of a fixed
   grid, so cards of different aspect ratios pack tightly together like
   a Pinterest wall instead of sitting in uniform equal-size boxes. */
#galleryCharGrid {
  column-count:2;
  column-gap:8px;
}

.galCharCard {
  position:relative;
  display:block;
  width:100%;
  break-inside:avoid;
  margin-bottom:8px;
  border-radius:16px;
  overflow:hidden;
  background:#1a1a1a;
  cursor:pointer;
  transition:transform 0.12s ease;
}
.galCharCard:active {
  transform:scale(0.96);
}

.galCardPhoto {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center; /* crop from the bottom, not the center —
    keeps faces (usually near the top of a portrait photo) visible even
    when the card's aspect ratio is much wider/narrower than the source
    image, instead of a center-crop cutting the top of the head off */
  display:block;
}

/* Darkens the lower portion of the photo so the name/count caption
   stays legible regardless of how bright the underlying image is. */
.galCardScrim {
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 48%);
  pointer-events:none;
}

/* Gradient ring + pulsing glow — same shine treatment as the profile
   page, scaled down as a small pinned badge in the corner of each
   masonry card. No rotation, just a still gradient border and a soft
   breathing glow. */
.galCharAvatarRing {
  position:relative;
  width:64px;
  height:64px;
  border-radius:50%;
  padding:2.5px;
  background:conic-gradient(from 0deg, #f9c74f, #ff4d6d, #8134af, #00AFEC, #f9c74f);
  animation:galRingGlow 2.4s ease-in-out infinite;
  flex-shrink:0;
}

.galCharAvatarRing::before {
  content:"";
  position:absolute;
  inset:2.5px;
  border-radius:50%;
  background:#0d0d0d;
  z-index:0;
}

.galCharAvatar {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

.galCardBadge {
  position:absolute;
  left:8px;
  bottom:8px;
  width:30px;
  height:30px;
  padding:2px;
}

.galCardInfo {
  position:absolute;
  left:44px;
  right:8px;
  bottom:9px;
}

.galCharName {
  font-size:12.5px;
  font-weight:700;
  color:white;
  text-shadow:0 1px 4px rgba(0,0,0,0.7);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.galCharCount {
  margin-top:1px;
  font-size:10px;
  color:rgba(255,255,255,0.75);
  text-shadow:0 1px 3px rgba(0,0,0,0.7);
}

/* ═══ CONTACT WALLPAPER PICKER ═══ */
.cwpRow {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 8px;
  border-radius:12px;
  cursor:pointer;
  transition:background 0.12s ease;
}
.cwpRow:active {
  background:rgba(255,255,255,0.08);
}

.cwpAvatar {
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  border:1.5px solid rgba(255,255,255,0.15);
  flex-shrink:0;
}

.cwpName {
  color:white;
  font-size:14px;
  font-weight:600;
  font-family:Arial;
}

/* ═══ CHARACTER PROFILE HEADER (Gallery profile view) ═══ */
#galProfileHeader {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:26px 0 18px;
}

/* Gradient ring + pulsing glow behind the profile picture — a still
   gradient border (no rotation) with a soft breathing glow, so the
   character's photo reads as the centerpiece of the page. */
.galProfileRing {
  position:relative;
  width:100px;
  height:100px;
  border-radius:50%;
  padding:3px;
  background:conic-gradient(from 0deg, #f9c74f, #ff4d6d, #8134af, #00AFEC, #f9c74f);
  animation:galRingGlow 2.4s ease-in-out infinite;
}

.galProfileRing::before {
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:#0d0d0d;
  z-index:0;
}

#galProfileImg {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

@keyframes galRingGlow {
  0%, 100% { box-shadow:0 0 16px rgba(249,199,79,0.35), 0 0 30px rgba(255,77,109,0.15); }
  50%      { box-shadow:0 0 24px rgba(249,199,79,0.55), 0 0 44px rgba(255,77,109,0.3); }
}

#galProfileNameBig {
  margin-top:10px;
  font-size:17px;
  font-weight:800;
  color:white;
}

#galPreview {
  display:none;
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.95);
  z-index:100000;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

#galPreviewClose {
  position:absolute;
  top:14px; right:14px;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.15);
  color:white;
  font-size:18px;
  cursor:pointer;
}

#galPreviewImg {
  max-width:92%;
  max-height:72%;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.8);
}

#galSetBgBtn {
  margin-top:18px;
  padding:13px 30px;
  border:none;
  border-radius:24px;
  background:linear-gradient(135deg,#ff4d6d,#c9184a);
  color:white;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(255,77,109,0.45);
  transition:transform 0.15s, box-shadow 0.15s;
  letter-spacing:0.5px;
}
#galSetBgBtn:active {
  transform:scale(0.96);
  box-shadow:0 2px 8px rgba(255,77,109,0.3);
}

#galToast {
  position:absolute;
  bottom:70px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(255,77,109,0.92);
  color:white;
  padding:9px 20px;
  border-radius:20px;
  font-size:13px;
  opacity:0;
  transition:opacity 0.3s, transform 0.3s;
  white-space:nowrap;
  pointer-events:none;
}
#galToast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ── THIK G ── */
#reelContainer::-webkit-scrollbar { display:none; }
#tgHomeView::-webkit-scrollbar    { display:none; }
#tgReelsView::-webkit-scrollbar   { display:none; }

.tgPost {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  overflow:hidden;
}

.tgPostHeader {
  display:flex; align-items:center;
  gap:10px; padding:10px 12px;
  cursor:pointer;
}

.tgPostHeader img {
  width:38px; height:38px;
  border-radius:50%; object-fit:cover;
  border:1.5px solid #ff4d6d;
  flex-shrink:0;
}

.tgPostMedia img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

.tgPostMedia video {
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  display:block;
}

.tgPostActions {
  display:flex;
  align-items:center;
  gap:4px;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,0.06);
}

.tgActionBtn {
  display:flex; align-items:center;
  gap:5px; padding:6px 10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; cursor:pointer;
  color:rgba(255,255,255,0.7);
  font-size:12px; font-weight:600;
  transition:background 0.2s;
  font-family:Arial;
}

.tgActionBtn:active {
  background:rgba(255,255,255,0.12);
}

.tgActionBtn.liked {
  background:rgba(255,77,109,0.2);
  border-color:rgba(255,77,109,0.4);
  color:#ff4d6d;
}

.tgPostCaption {
  padding:8px 12px 12px;
  color:rgba(255,255,255,0.7);
  font-size:13px; line-height:1.6;
}

/* REEL SLIDE */
.reelSlide {
  width:100%;
  height:100%;
  scroll-snap-align:start;
  position:relative;
  background:#000;
  overflow:hidden;
  flex-shrink:0;
  min-height:100%;
}

.reelSlide video {
  width:100%; height:100%;
  object-fit:cover;
  position:absolute;
  top:0; left:0;
}

.reelBottomFade {
  position:absolute;
  bottom:0; left:0; width:100%;
  height:50%;
  background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
  pointer-events:none; z-index:3;
}

.reelTopFade {
  position:absolute;
  top:0; left:0; width:100%;
  height:30%;
  background:linear-gradient(to bottom,rgba(0,0,0,0.5),transparent);
  pointer-events:none; z-index:3;
}

.reelProfileOverlay {
  position:absolute;
  bottom:80px; left:12px;
  display:flex; align-items:center;
  gap:10px; z-index:5; cursor:pointer;
  max-width:65%;
}

.reelProfileOverlay img {
  width:46px; height:46px;
  border-radius:50%;
  border:2px solid white;
  object-fit:cover; flex-shrink:0;
}

.reelProfileName {
  color:white; font-size:14px;
  font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,0.9);
}

.reelProfileBio {
  color:rgba(255,255,255,0.7);
  font-size:11px; margin-top:2px;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
}

.reelActions {
  position:absolute;
  right:10px; bottom:80px;
  display:flex; flex-direction:column;
  align-items:center; gap:4px; z-index:5;
}

.reelActionBtn {
  display:flex; flex-direction:column;
  align-items:center; gap:3px;
  background:none; border:none;
  cursor:pointer; padding:6px;
}

.reelActionIcon {
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,0.2);
  display:flex; align-items:center;
  justify-content:center; font-size:20px;
  transition:transform 0.15s, background 0.2s;
}

.reelActionBtn:active .reelActionIcon {
  transform:scale(0.86);
}

.reelActionBtn.liked .reelActionIcon {
  background:rgba(255,77,109,0.4);
  border-color:#ff4d6d;
}

.reelActionLabel {
  color:white; font-size:11px;
  font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,0.9);
}

/* PROFILE GRID */
.tgImgThumb {
  aspect-ratio:1/1;
  overflow:hidden;
  background:#1a1a1a;
  cursor:pointer;
}

.tgImgThumb img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 0.2s;
}

.tgImgThumb:active img { transform:scale(0.95); }

/* PROFILE BUBBLE */
.tgProfileBubble {
  display:flex; flex-direction:column;
  align-items:center; gap:5px;
  cursor:pointer; flex-shrink:0;
  min-width:65px; max-width:65px;
}

.tgProfileBubble img {
  width:58px; height:58px;
  border-radius:50%; object-fit:cover;
  border:2px solid #ff4d6d;
}

.tgProfileBubble span {
  color:rgba(255,255,255,0.7);
  font-size:10px; text-align:center;
  max-width:60px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}



/* ===================== DAY MENU ===================== */

#dayMenu {
  display:none;
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.93);
  z-index:99999;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
}

/* month label above the big number */
#dayMenuMonthEl {
  font-size:15px;
  font-weight:800;
  letter-spacing:7px;
  color:rgba(255,255,255,0.38);
  text-transform:uppercase;
  margin-bottom:-6px;
  font-family:-apple-system,'SF Pro Display',Arial,sans-serif;
}

/* big day number */
#dayMenuNumber {
  font-size:100px;
  font-weight:900;
  line-height:1;
  background:linear-gradient(135deg,#00AFEC,#0070C9);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-family:-apple-system,'SF Pro Display',Arial,sans-serif;
}

#dayMenuLabel {
  font-size:12px;
  color:rgba(255,255,255,0.5);
  letter-spacing:4px;
  text-transform:uppercase;
  margin-top:4px;
  margin-bottom:36px;
  font-family:-apple-system,'SF Pro Text',Arial,sans-serif;
}

/* what's in this day */
#dayMenuChars {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  max-width:300px;
  margin-bottom:36px;
}

.dayCharPill {
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:20px;
  padding:5px 12px;
  font-size:12px;
  color:white;
}

/* advance button */
#dayAdvanceBtn {
  padding:16px 36px;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,#00AFEC,#0070C9);
  color:white;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 24px rgba(0,175,236,0.4);
  transition:transform 0.15s;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-family:-apple-system,'SF Pro Text',Arial,sans-serif;
}
#dayAdvanceBtn:active { transform:scale(0.96); }
#dayAdvanceBtn:disabled {
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.3);
  box-shadow:none;
  cursor:default;
  letter-spacing:0.5px;
  text-transform:none;
}

#dayMaxNote {
  margin-top:12px;
  font-size:12px;
  color:rgba(255,255,255,0.3);
}

/* day advance toast */
#dayToast {
  position:absolute;
  bottom:80px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg,#00AFEC,#0070C9);
  color:white;
  padding:10px 22px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  opacity:0;
  transition:opacity 0.3s, transform 0.3s;
  white-space:nowrap;
  pointer-events:none;
  z-index:999999;
}
#dayToast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Profile tab active state */
.profTab { transition: color 0.2s, border-color 0.2s; }

/* Profile image grid items */
.profImgThumb {
  aspect-ratio:9/16;
  overflow:hidden;
  background:#1a1a1a;
  cursor:pointer;
}
.profImgThumb img {
  width:100%; height:100%; object-fit:cover;
  display:block; transition:transform 0.2s;
}
.profImgThumb:active img { transform:scale(0.95); }

/* Private card */
.privateCard {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
}
.privateBlur {
  filter:blur(14px);
  pointer-events:none;
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  display:block;
}
.unlockBtn {
  width:100%; padding:14px;
  border:none; cursor:pointer;
  background:linear-gradient(135deg,#ff4d6d,#c9184a);
  color:white; font-size:14px; font-weight:700;
  letter-spacing:0.5px;
}
.unlockBtn:disabled {
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.3);
  cursor:default;
}


#dayMenuClose {
  position:absolute;
  top:14px; right:14px;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.12);
  color:white;
  font-size:18px;
  cursor:pointer;
}



/* ── REEL ACTION BAR ── */
.reelActions {
  position: absolute;
  right: 0;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 5;
  padding: 8px 10px;
}

.reelActionBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 6px;
}

.reelActionIcon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.15s, background 0.2s;
  border: 1.5px solid rgba(255,255,255,0.2);
}

.reelActionBtn:active .reelActionIcon {
  transform: scale(0.88);
}

.reelActionBtn.liked .reelActionIcon {
  background: rgba(255,77,109,0.45);
  border-color: #ff4d6d;
}

.reelActionLabel {
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}


/* INTRO FADE TRANSITIONS */
#introVideo, #introImage, #introText, #introTapHint {
  transition: opacity 0.6s ease;
}

.intro-fade-out { opacity: 0 !important; }
.intro-fade-in  { opacity: 1 !important; }

@keyframes introTextIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0);    }
}

#introTextInner {
  animation: introTextIn 0.5s ease forwards;
  background: rgba(0,0,0,0.55);
  padding: 12px 16px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1.7;
}

/* ── ONLYFRIENDS REDESIGN ── */

/* POST CARD */
.ofPostCard {
  background:#141418;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  overflow:hidden;
}

.ofPostCard img,
.ofPostCard video {
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  display:block;
}

.ofPostCaption {
  padding:10px 14px 12px;
  color:rgba(255,255,255,0.7);
  font-size:13px;
  line-height:1.6;
}

.ofPostHeader {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  cursor:pointer;
}

.ofPostHeader img {
  width:36px !important;
  height:36px !important;
  aspect-ratio:1/1 !important;
  border-radius:50%;
  object-fit:cover;
  border:1.5px solid #00AFEC;
}

/* CREATOR CARD (home row) */
.ofCreatorCard {
  position:relative;
  width:118px;
  height:168px;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  flex-shrink:0;
  background:#141418;
}

.ofCreatorCardBg {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ofCreatorCardGrad {
  position:absolute;
  bottom:0; left:0; right:0;
  height:65%;
  background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.3) 60%,transparent 100%);
  pointer-events:none;
}

.ofCreatorCardInfo {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:8px 8px 10px;
  display:flex;
  align-items:center;
  gap:6px;
}

.ofCreatorCardAvatar {
  width:24px;
  height:24px;
  border-radius:50%;
  object-fit:cover;
  border:1.5px solid rgba(255,255,255,0.8);
  flex-shrink:0;
}

.ofCreatorCardName {
  color:white;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ofCreatorCardSub {
  color:rgba(255,255,255,0.5);
  font-size:9px;
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* MEMORY CARDS (character grid + per-character event grid) —
   same visual language as .ofCreatorCard, laid out 2-per-row instead
   of a horizontal scroll row. */
.memCardGrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.memCard {
  position:relative;
  aspect-ratio:3/4;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  background:#141418;
  -webkit-tap-highlight-color:transparent;
}

.memCardBg {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.memCardGrad {
  position:absolute;
  bottom:0; left:0; right:0;
  height:55%;
  background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.3) 60%,transparent 100%);
  pointer-events:none;
}

.memCardLabel {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:10px 12px 12px;
  color:white;
  font-size:13px;
  font-weight:700;
  font-family:Arial;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* LOCKED CONTENT */
.ofLockedBox {
  position:relative;
  aspect-ratio:9/16;
  background:#0E0E14;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
}

.ofLockedBox img {
  width:100% !important;
  height:100% !important;
  aspect-ratio:9/16 !important;
  object-fit:cover;
  filter:blur(18px);
  position:absolute;
  top:0; left:0;
}

.ofLockIcon {
  font-size:30px;
  z-index:2;
}

/* SUBSCRIBE BUTTON */
.ofSubBtn {
  width:100%;
  padding:13px;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,#00AFEC,#0070C9);
  color:white;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  letter-spacing:0.2px;
  box-shadow:0 4px 18px rgba(0,175,236,0.28);
}

.ofSubBtn:disabled {
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.25);
  cursor:default;
  box-shadow:none;
}

/* GRID THUMBNAIL */
.ofGridThumb {
  aspect-ratio:1/1;
  overflow:hidden;
  background:#141418;
  cursor:pointer;
  position:relative;
}

.ofGridThumb img,
.ofGridThumb video {
  width:100% !important;
  height:100% !important;
  aspect-ratio:1/1 !important;
  object-fit:cover;
  display:block;
}

.ofGridLock {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:18px;
  background:rgba(0,0,0,0.6);
  width:36px; height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(4px);
}

/* SAVE SLOT CARD */
.saveSlot {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:12px;
}

.saveSlot.hasData {
  border-color:rgba(255,77,109,0.3);
  background:rgba(255,77,109,0.05);
}

.saveSlotIcon {
  width:44px; height:44px;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  display:flex; align-items:center;
  justify-content:center;
  font-size:20px; flex-shrink:0;
}

.saveSlotInfo {
  flex:1;
}

.saveSlotTitle {
  color:white;
  font-size:13px;
  font-weight:700;
}

.saveSlotSub {
  color:rgba(255,255,255,0.35);
  font-size:11px;
  margin-top:3px;
}

.saveSlotBtns {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.saveBtnSave {
  padding:7px 12px;
  border:none; border-radius:8px;
  background:linear-gradient(135deg,#ff4d6d,#c9184a);
  color:white; font-size:11px;
  font-weight:700; cursor:pointer;
  white-space:nowrap;
}

.saveBtnLoad {
  padding:7px 12px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;
  background:rgba(255,255,255,0.08);
  color:white; font-size:11px;
  font-weight:700; cursor:pointer;
  white-space:nowrap;
}

.saveBtnLoad:disabled {
  opacity:0.3; cursor:default;
}

.saveBtnDelete {
  padding:7px 12px;
  border:1px solid rgba(255,77,77,0.3);
  border-radius:8px;
  background:rgba(255,77,77,0.08);
  color:#ff6b6b; font-size:11px;
  font-weight:700; cursor:pointer;
  white-space:nowrap;
}

.saveBtnDelete:disabled {
  opacity:0.3; cursor:default;
}

/* NOTES APP */
.noteCard {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:14px;
  cursor:pointer;
  transition:background 0.2s;
  display:flex;
  align-items:center;
  gap:12px;
}

.noteCard:active {
  background:rgba(255,255,255,0.08);
}

.noteCardIcon {
  width:46px; height:46px;
  border-radius:12px;
  display:flex; align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
}

.noteCardInfo { flex:1; }

.noteCardTitle {
  color:white;
  font-size:14px;
  font-weight:700;
}

.noteCardPreview {
  color:rgba(255,255,255,0.4);
  font-size:12px;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}

.noteCardArrow {
  color:rgba(255,255,255,0.3);
  font-size:18px;
}

/* CATEGORY PILL */
.noteCatPill {
  padding:6px 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.6);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  transition:all 0.2s;
}

.noteCatPill.active {
  background:rgba(255,77,109,0.25);
  border-color:rgba(255,77,109,0.6);
  color:#ff4d6d;
}

/* NOTE DETAIL SECTIONS */
.noteSection {
  margin-bottom:20px;
}

.noteSectionTitle {
  color:#ff4d6d;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,77,109,0.2);
}

.noteSectionBody {
  color:rgba(255,255,255,0.75);
  font-size:13px;
  line-height:1.8;
}

.noteTip {
  background:rgba(255,77,109,0.08);
  border:1px solid rgba(255,77,109,0.2);
  border-radius:10px;
  padding:10px 12px;
  color:rgba(255,255,255,0.7);
  font-size:12px;
  line-height:1.7;
  margin-top:8px;
}

.noteHighlight {
  background:rgba(255,200,0,0.1);
  border:1px solid rgba(255,200,0,0.2);
  border-radius:10px;
  padding:10px 12px;
  color:#f9c74f;
  font-size:12px;
  line-height:1.7;
  margin-top:8px;
}

/* NOTE IMAGES */
.noteHeroImg {
  width:100%;
  border-radius:14px;
  object-fit:cover;
  display:block;
  margin-bottom:20px;
  max-height:200px;
  border:1px solid rgba(255,255,255,0.08);
}

.noteSectionImg {
  width:100%;
  border-radius:10px;
  object-fit:cover;
  display:block;
  margin:8px 0 12px;
  border:1px solid rgba(255,255,255,0.07);
}

/* SEARCH HIGHLIGHT */
.searchMatch { color:white; }


/* Prevent mobile bounce scroll */
html, body {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

/* Fix touch scrolling inside app */
.messages,
#home,
#galleryScroll,
#reelContainer,
#ofHome,
#notesList,
#slots,
#hackHome {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* ── THIK G ── */
#reelContainer::-webkit-scrollbar { display:none; }
#tgHomeView::-webkit-scrollbar    { display:none; }
#tgReelsView::-webkit-scrollbar   { display:none; }

.tgPost {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  overflow:hidden;
}

.tgPostHeader {
  display:flex; align-items:center;
  gap:10px; padding:10px 12px;
  cursor:pointer;
}

.tgPostHeader img {
  width:38px; height:38px;
  border-radius:50%; object-fit:cover;
  border:1.5px solid #ff4d6d;
  flex-shrink:0;
}

.tgPostMedia img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

.tgPostMedia video {
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  display:block;
}

.tgPostActions {
  display:flex;
  align-items:center;
  gap:4px;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,0.06);
}

.tgActionBtn {
  display:flex; align-items:center;
  gap:5px; padding:6px 10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; cursor:pointer;
  color:rgba(255,255,255,0.7);
  font-size:12px; font-weight:600;
  transition:background 0.2s;
  font-family:Arial;
}

.tgActionBtn:active {
  background:rgba(255,255,255,0.12);
}

.tgActionBtn.liked {
  background:rgba(255,77,109,0.2);
  border-color:rgba(255,77,109,0.4);
  color:#ff4d6d;
}

.tgPostCaption {
  padding:8px 12px 12px;
  color:rgba(255,255,255,0.7);
  font-size:13px; line-height:1.6;
}

/* REEL SLIDE */
.reelSlide {
  width:100%;
  height:100%;
  scroll-snap-align:start;
  position:relative;
  background:#000;
  overflow:hidden;
  flex-shrink:0;
  min-height:100%;
}

.reelSlide video {
  width:100%; height:100%;
  object-fit:cover;
  position:absolute;
  top:0; left:0;
}

.reelBottomFade {
  position:absolute;
  bottom:0; left:0; width:100%;
  height:50%;
  background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
  pointer-events:none; z-index:3;
}

.reelTopFade {
  position:absolute;
  top:0; left:0; width:100%;
  height:30%;
  background:linear-gradient(to bottom,rgba(0,0,0,0.5),transparent);
  pointer-events:none; z-index:3;
}

.reelProfileOverlay {
  position:absolute;
  bottom:80px; left:12px;
  display:flex; align-items:center;
  gap:10px; z-index:5; cursor:pointer;
  max-width:65%;
}

.reelProfileOverlay img {
  width:46px; height:46px;
  border-radius:50%;
  border:2px solid white;
  object-fit:cover; flex-shrink:0;
}

.reelProfileName {
  color:white; font-size:14px;
  font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,0.9);
}

.reelProfileBio {
  color:rgba(255,255,255,0.7);
  font-size:11px; margin-top:2px;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
}

.reelActions {
  position:absolute;
  right:10px; bottom:80px;
  display:flex; flex-direction:column;
  align-items:center; gap:4px; z-index:5;
}

.reelActionBtn {
  display:flex; flex-direction:column;
  align-items:center; gap:3px;
  background:none; border:none;
  cursor:pointer; padding:6px;
}

.reelActionIcon {
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,0.2);
  display:flex; align-items:center;
  justify-content:center; font-size:20px;
  transition:transform 0.15s, background 0.2s;
}

.reelActionBtn:active .reelActionIcon {
  transform:scale(0.86);
}

.reelActionBtn.liked .reelActionIcon {
  background:rgba(255,77,109,0.4);
  border-color:#ff4d6d;
}

.reelActionLabel {
  color:white; font-size:11px;
  font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,0.9);
}

/* PROFILE GRID */
.tgImgThumb {
  aspect-ratio:1/1;
  overflow:hidden;
  background:#1a1a1a;
  cursor:pointer;
}

.tgImgThumb img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 0.2s;
}

.tgImgThumb:active img { transform:scale(0.95); }

/* PROFILE BUBBLE */
.tgProfileBubble {
  display:flex; flex-direction:column;
  align-items:center; gap:5px;
  cursor:pointer; flex-shrink:0;
  min-width:65px; max-width:65px;
}

.tgProfileBubble img {
  width:58px; height:58px;
  border-radius:50%; object-fit:cover;
  border:2px solid #ff4d6d;
}

.tgProfileBubble span {
  color:rgba(255,255,255,0.7);
  font-size:10px; text-align:center;
  max-width:60px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}


/* ═══ CALL APP — PREMIUM UI ═══ */
@keyframes callPulse {
  0%   { transform:scale(1);   opacity:0.6; }
  100% { transform:scale(1.8); opacity:0;   }
}

/* avatar wrapper */
.crAvatarWrap {
  position: relative;
  width: 108px; height: 108px;
  margin-bottom: 22px;
  flex-shrink: 0;
}

/* pulse rings */
.crPulse {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15);
  transform: translate(-50%,-50%);
}
.crPulse1 {
  width: 140px; height: 140px;
  animation: crRingPulse 2.2s ease-in-out infinite;
}
.crPulse2 {
  width: 170px; height: 170px;
  animation: crRingPulse 2.2s ease-in-out 0.6s infinite;
}
@keyframes crRingPulse {
  0%,100% { opacity:0.3; transform:translate(-50%,-50%) scale(0.96); }
  50%     { opacity:0.08; transform:translate(-50%,-50%) scale(1.03); }
}

/* avatar image */
.crAvatar {
  width: 108px; height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.25);
  position: relative; z-index: 2;
  display: block;
}

/* contact name */
.crName {
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin-bottom: 14px;
  font-family: -apple-system, 'SF Pro Display', Arial, sans-serif;
  text-align: center;
  letter-spacing: 0.2px;
}

/* status row */
.crStatusRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* animated signal bars */
.crBars {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
}
.crBars span {
  width: 3px;
  background: #4ade80;
  border-radius: 2px;
  animation: crBarAnim 1.1s ease-in-out infinite;
}
.crBars span:nth-child(1) { height: 5px;  animation-delay: 0s;    }
.crBars span:nth-child(2) { height: 9px;  animation-delay: 0.15s; }
.crBars span:nth-child(3) { height: 13px; animation-delay: 0.3s;  }
.crBars span:nth-child(4) { height: 9px;  animation-delay: 0.45s; }
@keyframes crBarAnim {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.3; }
}

/* status text */
.crStatusText {
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
  letter-spacing: 0.3px;
}

/* subtle label above controls */
.crSubLabel {
  color: rgba(255,255,255,0.25);
  font-size: 11px;
  letter-spacing: 0.8px;
  margin-bottom: 20px;
  font-family: -apple-system, Arial, sans-serif;
}

/* 3x2 controls grid */
.crControls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
  width: 100%;
  padding: 0 28px;
  box-sizing: border-box;
  margin-bottom: 28px;
}

.crBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: default;
}

.crBtnIcon {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.crBtnLabel {
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
  letter-spacing: 0.2px;
}

/* ═══════════════════════════════════════
   GROUP CHAT  — uses the same #chat screen as private chats;
   only the typing indicator and animation need their own styles
═══════════════════════════════════════ */

/* TYPING INDICATOR — sits inside a .msg.them bubble */
.gc-typing {
  display:inline-flex; align-items:center; gap:5px;
}
.gc-typing span {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.4);
  display:inline-block;
  animation:gcDotBounce 1.3s infinite ease-in-out;
}
.gc-typing span:nth-child(2){ animation-delay:0.2s; }
.gc-typing span:nth-child(3){ animation-delay:0.4s; }

@keyframes gcDotBounce {
  0%,60%,100%{ transform:translateY(0);   opacity:0.4; }
  30%         { transform:translateY(-6px);opacity:1;   }
}

/* Fade-in for new messages */
.gc-anim {
  animation:gcSlideIn 0.22s ease forwards;
}
@keyframes gcSlideIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0);   }
}

/* end call button */
.crEndBtn {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #e53935;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(229,57,53,0.55);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.crEndBtn:active { transform: scale(0.93); }

/* answer button — same shape as .crEndBtn, green instead of red */
.crAnswerBtn {
  background: #4CD964;
  box-shadow: 0 6px 24px rgba(76,217,100,0.55);
}

.callContactRow {
  display:flex; align-items:center;
  gap:13px;
  padding:11px 14px;
  cursor:pointer;
  background:rgba(255,255,255,0.04);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.06);
  transition:background 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.callContactRow:active {
  background:rgba(255,255,255,0.09);
}
.callContactRowDivider {
  border-bottom:none;
}
.callPhoneBtn {
  width:40px; height:40px; border-radius:50%;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:transform 0.1s, opacity 0.1s;
}
.callPhoneBtn:active {
  transform:scale(0.9);
}

/* Video/Audio call buttons — image/bag/videocall.png + audiocall.png are
   square files whose actual art is a circle already filling the frame,
   so cropping them to a circular button with object-fit:cover lands
   exactly on that art with no extra padding/background around it. */
.callTypeBtn {
  width:34px; height:34px; border-radius:50%;
  border:none; background:none; padding:0;
  cursor:pointer; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.1s, opacity 0.1s;
}
.callTypeBtn:active {
  transform:scale(0.9);
}
.callTypeBtn img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  border-radius:50%;
}
.callRowHasStory .callTypeBtn img {
  box-shadow:0 0 0 2px #FFD54F, 0 0 8px rgba(255,213,79,0.55);
}

.callOptionBtn {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:16px 14px;
  display:flex; align-items:center;
  gap:12px; cursor:pointer;
  color:white; font-size:14px;
  font-weight:600; font-family:Arial;
  transition:background 0.2s;
  width:100%; text-align:left;
}

.callOptionBtn:active {
  background:rgba(255,255,255,0.1);
}

.callOptionIcon {
  width:44px; height:44px;
  border-radius:12px;
  background:rgba(255,77,109,0.15);
  border:1px solid rgba(255,77,109,0.3);
  display:flex; align-items:center;
  justify-content:center; font-size:22px;
  flex-shrink:0;
}

.callActivityBtn {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:14px;
  color:white; font-size:13px;
  font-weight:600; font-family:Arial;
  cursor:pointer; width:100%;
  text-align:left;
  transition:background 0.2s;
}

.callActivityBtn:active {
  background:rgba(255,255,255,0.1);
}


#globalViewer {
  border-radius: 38px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Mobile — no border radius */
@media screen and (max-width: 500px) {
  #globalViewer {
    border-radius: 0 !important;
  }
}
/* Disable video fullscreen everywhere */
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

video::-webkit-media-controls-overflow-button {
  display: none !important;
}

video::-webkit-media-controls-panel {
  overflow: hidden;
}

video {
  max-width: 100%;
}
#dayEventVideo,
#introVideo,
#callBgVideo,
#callEvtVideo {
  transition: opacity 0.2s ease;
}


/* ── MAP APP ── */
@keyframes mapPinPulse {
  0%   { box-shadow:0 0 0 0 rgba(255,77,109,0.7); }
  70%  { box-shadow:0 0 0 8px rgba(255,77,109,0); }
  100% { box-shadow:0 0 0 0 rgba(255,77,109,0); }
}

@keyframes mapDotPulse {
  0%,100% { transform:scale(1); opacity:1; }
  50%     { transform:scale(1.5); opacity:0.6; }
}

.mapPin {
  position:absolute;
  transform:translate(-50%,-100%);
  display:flex; flex-direction:column;
  align-items:center; gap:0;
  cursor:pointer; z-index:5;
}

.mapPinCircle {
  width:40px; height:40px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.25);
  transition:transform 0.2s;
}

.mapPinCircle.hasEvent {
  border-color:#ff4d6d;
  animation:mapPinPulse 1.8s infinite;
}

.mapPinCircle img {
  width:100%; height:100%;
  object-fit:cover; display:block;
}

.mapPinTip {
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:8px solid rgba(255,255,255,0.25);
  margin-top:-1px;
}

.mapPinTip.hasEvent {
  border-top-color:#ff4d6d;
}

.mapPinLabel {
  background:rgba(0,0,0,0.82);
  color:rgba(255,255,255,0.8);
  font-size:9px; font-weight:700;
  padding:2px 7px; border-radius:8px;
  white-space:nowrap; margin-top:3px;
  letter-spacing:0.3px;
}

.mapPinLabel.hasEvent {
  color:white;
  border:1px solid rgba(255,77,109,0.4);
}

.mapEventDot {
  position:absolute;
  top:-6px; right:-6px;
  width:12px; height:12px;
  border-radius:50%;
  background:#ff4d6d;
  border:2px solid #16213e;
  animation:mapDotPulse 1.5s infinite;
}

/* LOCATION OPTION BUTTON */
.mapOptBtn {
  width:100%; height:72px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  background:rgba(0,0,0,0.6);
  cursor:pointer; overflow:hidden;
  position:relative;
  display:flex; align-items:center;
  backdrop-filter:blur(6px);
  transition:transform 0.15s;
}

.mapOptBtn:active { transform:scale(0.98); }

.mapOptBtn.hasEvent {
  border-color:rgba(255,77,109,0.4);
  background:rgba(255,77,109,0.08);
}

.mapOptBtnBg {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background-size:cover;
  background-position:center;
  opacity:0.35;
}

.mapOptBtnOverlay {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background:linear-gradient(
    to right,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.2) 100%
  );
}

.mapOptBtnContent {
  position:relative; z-index:2;
  padding:0 16px;
  display:flex; align-items:center;
  gap:12px; width:100%;
  box-sizing:border-box;
}

.mapOptBtnName {
  color:white; font-size:15px;
  font-weight:700; flex:1;
  text-align:left;
}

/* EVENT BUTTON */
.mapEvtBtn {
  width:auto;
  padding:11px 30px;
  border:none;
  border-radius:24px;
  background:linear-gradient(135deg,#ff4d6d,#c9184a);
  color:white;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  display:block;
  text-align:center;
  box-shadow:0 3px 14px rgba(255,77,109,0.45);
  transition:transform 0.12s;
  margin:0 auto;
  -webkit-tap-highlight-color:transparent;
}

/* ══════════════════════════════════════════════════════
   PC / DESKTOP EXTERNAL OVERLAY — bottom dialogue bar
   ──────────────────────────────────────────────────────
   js/device-overlay.js puts .pc-overlay-below on <body> when
   there's a mouse+hover device. Every narration/dialogue overlay
   in the game shares the same shape (an outer div + an inline
   text bubble inside it, plus a "tap to continue" hint) — this
   turns the outer div into a full-width, semi-transparent-black
   visual-novel-style dialogue bar fixed to the bottom of the
   viewport (overlapping the bottom of the phone slightly, same
   as classic VN text boxes), and strips the inner bubble's own
   background/border so it just sits as centered text inside
   that bar. Only geometry/background is touched here — display
   is left alone so the existing JS show/hide toggling (none/
   block) keeps working exactly as before. Nothing here applies
   unless .pc-overlay-below is set, so mobile/touch play is
   100% unaffected.
════════════════════════════════════════════════════════ */
body.pc-overlay-below .phoneFrame {
  /* NOTE: must use margin, not transform — a transform here would make
     .phoneFrame a containing block for its fixed-position descendants
     (the dialogue bar below), trapping it inside the phone's width
     instead of spanning the full viewport. */
  margin-bottom:80px;
}

/* Each dialogue overlay above lives inside its own screen container
   (#introScreen, #dayEventScreen, #memoryViewer, #callApp, #visitScene,
   #timberDateScene, #ofVisitScene), and every one of those containers
   sets its own explicit z-index (values ranging from 10 to 999999) —
   which establishes a CSS stacking context. That caps the dialogue bar's
   effective stacking position at its container's z-index NO MATTER HOW
   HIGH the dialogue bar's own z-index is set, since child stacking is
   scoped within the nearest z-index-establishing ancestor. All of those
   container z-indexes are far below #phoneNavBar's 9999999, which is
   why the phone's nav bar was rendering on top of the dialogue text on
   PC.

   Fix: lower #phoneNavBar itself instead of raising the 7 containers.
   Raising the containers was tried first and reverted — #introScreen in
   particular is display:flex (visible) from page load and normally sits
   harmlessly BEHIND the age gate / language gate purely because of its
   low z-index; boosting it made it flash on top of both as a black
   screen before the player ever reaches the intro. Lowering the single,
   well-contained #phoneNavBar element below the smallest container
   z-index (10, #memoryViewer) achieves the same "dialogue always wins"
   result without disturbing any container's relationship to anything
   else, and also lets #pcOverlayPortrait (10000000, unchanged) go back
   to correctly rendering above the dialogue bar as before. PC-mode only. */
body.pc-overlay-below #phoneNavBar {
  z-index:5 !important;
}

body.pc-overlay-below #introText,
body.pc-overlay-below #dayEventText,
body.pc-overlay-below #sceneText,
body.pc-overlay-below #memoryViewText,
body.pc-overlay-below #callNarrText,
body.pc-overlay-below #vsNarrText,
body.pc-overlay-below #timberDateNarr,
body.pc-overlay-below #ofVisitNarr {
  position:fixed !important;
  top:auto !important;
  bottom:0 !important;
  left:0 !important;
  right:0 !important;
  transform:none !important;
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:56px 48px 46px !important;
  min-height:220px !important;
  background:
    linear-gradient(to top, rgba(8,4,14,0.62) 0%, rgba(14,6,22,0.55) 55%, rgba(20,8,30,0.18) 100%) !important;
  border-top:1px solid rgba(255,77,109,0.35) !important;
  box-shadow:
    0 0 24px rgba(255,77,109,0.12),
    0 -14px 40px rgba(0,0,0,0.3) !important;
  backdrop-filter:blur(3px) !important;
  text-align:center !important;
  z-index:99999 !important;
}

/* thin glowing accent line along the very top edge of the bar */
body.pc-overlay-below #introText::before,
body.pc-overlay-below #dayEventText::before,
body.pc-overlay-below #sceneText::before,
body.pc-overlay-below #memoryViewText::before,
body.pc-overlay-below #callNarrText::before,
body.pc-overlay-below #vsNarrText::before,
body.pc-overlay-below #timberDateNarr::before,
body.pc-overlay-below #ofVisitNarr::before {
  content:"" !important;
  position:absolute !important;
  top:0 !important; left:50% !important;
  transform:translate(-50%, -100%) !important;
  width:min(220px, 40%) !important;
  height:3px !important;
  background:linear-gradient(90deg, transparent, #ff4d6d, transparent) !important;
  border-radius:2px !important;
}

/* Inner text bubbles: strip their own bubble styling — the bar
   above already provides the background — and let them read as
   a centered, comfortably-measured line of text inside it. */
body.pc-overlay-below #introTextInner,
body.pc-overlay-below #dayEventTextInner,
body.pc-overlay-below #sceneTextInner,
body.pc-overlay-below #memoryViewTextInner,
body.pc-overlay-below #callNarrInner,
body.pc-overlay-below #vsNarrInner,
body.pc-overlay-below #timberDateNarrInner,
body.pc-overlay-below #ofVisitNarrInner {
  display:block !important;
  max-width:min(900px, 90%) !important;
  width:100% !important;
  margin:0 auto !important;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  padding:0 !important;
  box-sizing:border-box !important;
  font-size:16px !important;
  letter-spacing:0.2px !important;
  line-height:1.8 !important;
  text-shadow:0 2px 10px rgba(0,0,0,0.9) !important;
}

body.pc-overlay-below #introTapHint,
body.pc-overlay-below #dayEventTapHint,
body.pc-overlay-below #sceneTapHint,
body.pc-overlay-below #memoryViewHint,
body.pc-overlay-below #callTapHint,
body.pc-overlay-below #vsTapHint,
body.pc-overlay-below #timberDateTapHint,
body.pc-overlay-below #ofVisitTapHint {
  position:fixed !important;
  bottom:16px !important;
  top:auto !important;
  left:auto !important;
  right:30px !important;
  transform:none !important;
  color:rgba(255,255,255,0.5) !important;
  letter-spacing:1.5px !important;
  z-index:100000 !important;
}

/* PC-ONLY dialogue speaker portrait — sits in the bottom dialogue bar's
   left side, in the empty space beside the phone rather than centered
   behind it (the phone occupies the middle of the screen, so centering
   this would just hide it behind/under the phone on most screens).
   js/pc-overlay-portrait.js toggles src/display; nothing here ever
   runs any story logic. Hidden by default and force-hidden outside
   .pc-overlay-below as a second safety net, so this can never appear
   on phone/touch or once a desktop window has been shrunk into the
   fullscreen phone simulation. */
#pcOverlayPortrait {
  display:none;
  position:fixed;
  bottom:0;
  left:40px;
  max-height:88vh;
  max-width:min(400px, 32vw);
  object-fit:contain;
  object-position:bottom;
  pointer-events:none;
  z-index:10000000;
  filter:
    drop-shadow(0 0 20px rgba(255,77,109,0.5))
    drop-shadow(0 0 46px rgba(255,77,109,0.28))
    drop-shadow(0 14px 26px rgba(0,0,0,0.6));
}

body:not(.pc-overlay-below) #pcOverlayPortrait {
  display:none !important;
}

.mapEvtBtn:active { transform:scale(0.94); }

#languageCardGrid::-webkit-scrollbar { display:none; }